<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>希朗少儿英语</title>
    <link rel="stylesheet" href="/css/swiper-3.4.2.min.css">
    <link rel="stylesheet" href="/css/style.css">
</head>
<body>
    <div class="banner">
        <div class="wrapper">
            <img class="link1" src="/images/banner_link1.png" alt="">
            <img class="link2" src="/images/banner_link2.png" alt="">
            <img class="link3" src="/images/banner_link3.png" alt="">
        </div>
    </div>

    <div class="part1">
        <div class="bg1">
            <div class="wrapper">
                <div class="big-video">
                    <div class="video-box">
                        <% if (BrandManagement.length) { %>
                            <img class="scale" data-scale="best-fill" src="<%= BrandManagement[0].picUrl %>" alt="">
                        <% } %>
                        <div class="mask">
                            <% if (BrandManagement.length) { %>
                                <p><%= BrandManagement[0].title %></p>
                            <% } %>
                        </div>
                    </div>
                    <div class="border">
                        <% if (BrandManagement.length) { %>
                            <img class="play" data-video-url="<%= BrandManagement[0].videoUrl %>" src="/images/play_icon.png" alt="">
                        <% } %>
                    </div>
                </div>
                <ul>
                    <% for (var i = 0; i < VideoInterview.length; i++) { %>
                        <li>
                            <div class="small-video-box">
                                <img class="scale" data-scale="best-fill" src="<%= VideoInterview[i].picUrl %>" alt="">
                                <div class="mask">
                                    <p><%= VideoInterview[i].title %></p>
                                </div>
                            </div>
                            <div class="border">
                                <img class="play" data-video-url="<%= VideoInterview[i].videoUrl %>" src="/images/play_icon.png" alt="">
                                <img class="text" src="/images/small_video_text<%= i %>.png" alt="">
                            </div>
                        </li>
                    <% } %>
                </ul>
            </div>
        </div>
        <div class="bg2">
            <div class="wrapper">
                <ul>
                    <% for (var i = 0; i < SchoolStory.length; i++) { %>
                        <li>
                            <div class="tit">
                                <p><a href="/article?id=<%= SchoolStory[i].id %>"><%= SchoolStory[i].title %></a></p>
                            </div>
                            <div class="con">
                                <p><%= SchoolStory[i].remark %></p>
                            </div>
                            <div class="man">
                                <a href="/article?id=<%= SchoolStory[i].id %>" class="pic">
                                    <img src="<%= SchoolStory[i].picUrl %>" class="scale" data-scale="best-fill" alt="">
                                </a>
                                <div class="info">
                                    <p><%= SchoolStory[i].insititutionName %></p>
                                </div>
                            </div>
                        </li>
                    <% } %>
                </ul>
                <a href="" class="more"></a>
            </div>
        </div>
    </div>

    <div class="part2">
        <ul class="wrapper">
            <% for (var i = 0; i < SchoolDisplay.length; i++) { %>
                <li>
                    <div class="pic">
                        <img class="scale" data-scale="best-fill" src="<%= SchoolDisplay[i].picUrl %>" alt="">
                    </div>
                    <div class="border" data-id="<%= SchoolDisplay[i].id %>"></div>
                    <p><%= SchoolDisplay[i].institutionName %></p>
                </li>
            <% } %>
        </ul>
    </div>

    <div class="part3">
        <div class="wrapper">
            <div class="title">
                <img src="/images/part3_title.png" alt="">
            </div>
            <div class="tab-box">
                <img class="show" src="/images/part3_tab1.png" alt="">
                <img src="/images/part3_tab2.png" alt="">
                <img src="/images/part3_tab3.png" alt="">
                <img src="/images/part3_tab4.png" alt="">
                <img src="/images/part3_tab5.png" alt="">
                <img src="/images/part3_tab6.png" alt="">
                <img src="/images/part3_tab7.png" alt="">
                <img src="/images/part3_tab8.png" alt="">
                <img src="/images/part3_tab9.png" alt="">
                <img src="/images/part3_tab10.png" alt="">
                <img src="/images/part3_tab11.png" alt="">
                <img src="/images/part3_tab12.png" alt="">
            </div>
            <a href="javascript:;" class="prev btn"></a>
            <a href="javascript:;" class="next btn"></a>
        </div>
    </div>

    <div class="modal picture">
        <div class="scroll">
            <div class="box">
                <div class="swiper-container">
                    <div class="swiper-wrapper"></div>
                    <div class="swiper-pagination"></div>
                </div>
                <img src="/images/arrow_l.png" class="prev btn" alt="">
                <img src="/images/arrow_r.png" class="next btn" alt="">
                <a href="javascript:;" class="close"></a>
            </div>
        </div>
    </div>

    <div class="modal video">
        <div class="scroll">
            <div class="box">
                <video controls src=""></video>
                <a href="javascript:;" class="close"></a>
            </div>
        </div>
    </div>

    <script src="/js/jquery.min.js"></script>
    <script src="/js/swiper-3.4.2.jquery.min.js"></script>
    <script src="/js/image-scale.js"></script>
    <script src="/js/jqfloat.min.js"></script>
    <script>
        $('img.scale').imageScale()

        $('.link1, .link2, .link3').jqFloat({
            width: 10,
            height: 10,
            speed: 1000
        })

        $('.link1').click(function() {
            $('html, body').animate({
                scrollTop: '1150px'
            })
        })

        $('.link2').click(function() {
            var height = $('.part1 .bg2').offset().top + $('.part1 .bg2').height()
            $('html, body').animate({
                scrollTop: height + 'px'
            })
        })

        $('.link3').click(function() {
            var height = $('.part3').offset().top + 80
            $('html, body').animate({
                scrollTop: height + 'px'
            })
        })

        var curIndex = 0

        $('.part3 .prev').click(function() {
            curIndex--

            if (curIndex == -1) curIndex = 11

            $('.tab-box img').fadeOut()
            $('.tab-box img').eq(curIndex).fadeIn()
        })

        $('.part3 .next').click(function() {
            curIndex++

            if (curIndex == 12) curIndex = 0

            $('.tab-box img').fadeOut()
            $('.tab-box img').eq(curIndex).fadeIn()
        })

        $('.play').click(function() {
            var videoUrl = $(this).data('video-url')

            $('.modal.video').fadeIn()
            $('video').attr('src', videoUrl)
        })

        $('.close').click(function() {
            $('video').get(0).pause()
            $('.modal').fadeOut()
        })

        var page = 1
        $('.more').click(function() {
            $.ajax({
                url: 'getSchoolStory?pageNum=' + ++page,
                success: function(res) {
                    if (res.rowCount <= page * 3) {
                        $('.more').hide()
                        return
                    }

                    var html = ''

                    for (var i = 0; i < res.data.length; i++) {
                        html += '<li><div class="tit"><p>'
                        html += res.data[i].title
                        html += '</p></div><div class="con"><p>'
                        html += res.data[i].remark
                        html += '</p></div><div class="man"><div class="pic">'
                        html += '<img src=' + res.data[i].picUrl + ' class="scale" data-scale="best-fill" alt="">'
                        html += '</div><div class="info"><p>'
                        html += res.data[i].insititutionName
                        html += '</p></div></li>'
                    }

                    $('.part1 .bg2 ul').append(html)
                    $('img.scale').imageScale()
                }
            })

            return false
        })

        var swiper = null
        $('.part2 li .border').click(function() {
            $.ajax({
                url: 'getSchoolPic?id=' + $(this).data('id'),
                success: function(res) {
                    if (res.length === 0) {
                        alert('没有更多图片')
                        return
                    }

                    var html = ''

                    for (var i = 0; i < res.length; i++) {
                        html += '<div class="swiper-slide" style="background: url(' + res[i].picUrl + ') center /cover;"></div>'
                    }

                    $('.swiper-wrapper').empty().append(html)

                    $('.modal.picture').fadeIn()

                    if (swiper) swiper.destroy()

                    swiper = new Swiper('.swiper-container', {
                        pagination: '.swiper-pagination',
                        paginationClickable: true,
                        autoplay: 3000,
                        loop: true,
                        autoplayDisableOnInteraction: false,
                        nextButton: '.modal .next',
                        prevButton: '.modal .prev'
                    })
                }
            })
        })
    </script>
</body>
</html>